<template>
    <div class="costIllness">
        <div class="top bg-border">
            <div>
                <div class="form">
                    <span class="label">医保区划</span>
                    <el-select v-model="formData.regionCode">
                        <el-option value="110000" label="全部"></el-option>
                        <el-option
                            v-for="item in regionList"
                            :key="item.regionCode"
                            :value="item.regionCode"
                            :label="item.name"></el-option>
                    </el-select>
                </div>
                <div class="form">
                    <span class="label">时间</span>
                    <el-select v-model="formData.time">
                        <el-option value="0" label="最近五年"></el-option>
                        <el-option value="10" label="最近十年"></el-option>
                    </el-select>
                </div>

            </div>
            <div class="disease-name" @click="showDiseaseSelect">
                <div class="name" :title="disease.name">{{disease.name}}</div>
                <i class="el-icon-sort icon"></i>
            </div>
        </div>
        <div class="middle bg-border">
            <div class="left">
                <div class="title">
                    疾病费用趋势分析
                </div>
                <div class="select">
                    <el-select v-model="diseaseTrends">
                        <el-option value="" label="全部">

                        </el-option>
                    </el-select>
                </div>
                <div class="chart">
                    <barChart></barChart>
                </div>
            </div>
            <div class="right">
                <div class="title">
                    疾病费用增长率排行
                </div>
                <div class="chart">
                    <horizontalBar></horizontalBar>
                </div>
            </div>
        </div>
        <div class="bottom bg-border">
            <div class="bottom-title">
                疾病费用结构分析
            </div>
            <div class="bottom-left">
                <div class="select">
                    <el-select v-model="diseaseType">
                        <el-option value="" label="全部"></el-option>
                    </el-select>
                </div>
                <bottomBarChart></bottomBarChart>
            </div>
            <div class="bottom-right">
                <div class="bottom-right-title">2014年糖尿病费用结构组成</div>
                <pieChart></pieChart>
            </div>
        </div>
        <!-- 疾病选择弹出框 -->
        <diseaseSelectDialog 
            :disease="disease"
            :dialogVisbile="dialogVisbile" 
            :data="diseaseNameList"
            @selectDisease="selectDisease"></diseaseSelectDialog>
    </div>
</template>
<script>
import diseaseSelectDialog from "@/components/diseaseSelectDialog";
import barChart from "./components/barChart";
import horizontalBar from "./components/horizontalBar";
import bottomBarChart from "./components/bottomBarChart";
import pieChart from "./components/pieChart";
export default {
    data() {
        return {
            formData: {
                regionCode: "110000",
                time: "0"
            },
            dialogVisbile: false,
            disease: {
                name: "慢性病",
                code: "dcsd"
            },
            diseaseTrends: "",
            diseaseType: "",
            regionList: [],
            diseaseNameList: [],
        }
    },
    components: {
        diseaseSelectDialog,
        barChart,
        horizontalBar,
        bottomBarChart,
        pieChart
    },
    methods: {
        selectDisease(val) {
            this.dialogVisbile = false;
            if(val) {
                this.disease = val;
            }
        },
        showDiseaseSelect() {
            this.dialogVisbile = true;
        }
    }
}
</script>
<style lang="less" scoped>
@import url("@/assets/common/global_deep_style.less");
@import url('./index.less');
</style>